<template>
  	<div>
  		<div class="content1">
		  	<div class="tupian11"><img src="static/tutu2.jpg"></div>	
		  	<div class="wenzi1">捷俊（JAYJUN）黑色水光三部曲 25ml 10片/盒 补水保湿 男女通用</div>	
		  	<div class="qqp1">
			  	<div class="rmb1">
			  		<span class="ren">¥</span>
			  		<span class="yiyi">1</span>
			  		<span class="erer">22人在拼抢</span>
			  	</div>	
			  	<input type="button" value="去抢拼" class="qqp2" />
			  	<div class="clearfix"></div>
		  	</div>	
  		</div>
  		
  		<div class="content2">
		  	<div class="tupian11"><img src="static/tutu2.jpg"></div>	
		  	<div class="wenzi1">捷俊（JAYJUN）黑色水光三部曲 25ml 10片/盒 补水保湿 男女通用</div>	
		  	<div class="qqp1">
			  	<div class="rmb1">
			  		<span class="ren">¥</span>
			  		<span class="yiyi">1</span>
			  		<span class="erer">22人在拼抢</span>
			  	</div>	
			  	<input type="button" value="去抢拼" class="qqp2" />
			  	<div class="clearfix"></div>
		  	</div>	
  		</div>
  		<!--<ul class="jfsc">
  			<li>拼抢ing</li>
  			<li>积分商城</li>
  			<li>个人中心</li>
  			<li class="clearfix"></li>
  		</ul>-->
  	</div>
  
</template>

<script>
//import { Group, Cell } from 'vux'

export default {
  components: {
//  Group,
//  Cell
  },
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!'
    }
  }
}
</script>

<style>
	body{position: relative;}
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
	}
	.content1{
		width: 100%;
	}
	.content2{
		width: 100%;
		margin-top: 8px;
	}
	.tupian11{width: 100%;height: 180px;border: 1px solid black;}
	.tupian11 img{display: block;width: 100%;height: 180px;}
	.tupian12 img{display: block;width: 100%;height: 180px;}
	.wenzi1{font-size: 15px;line-height: 21px;color: #333;height: 42px;width: 100%;margin-top: 10px;padding:0 15px;}
	.qqp1{width: 100%;
	box-sizing: border-box;
	border: 1px /*solid*/ black;
	padding: 0 15px;
	}
	.rmb1{border: 1px /*solid*/ green;
		float: left;
		padding: 0 15px;
	}
	
	.ren{
		float: left;
		font-size: 12px;
		color: #ff2e22;
		margin-top: 10px;
	}
	.yiyi{
		float: left;
		font-size: 20px;
		margin-top: 1px;
		color: #ff2e22;
		
	}
	.erer{float: left;
		font-size: 10px;
		margin-top: 10px;
		color: #9b9b9b;
		padding: 0 6px;
		
	}
	.qqp2{float: right;
	      border: 1px /*solid*/ red;
	      height: 26px;
	      width: 76px;
	      border-radius: 4px;
	      background: #00c850;
	      margin-top: 5px;
	      
	}
	.clearfix{float: none;clear: both;}
	.jfsc{
		width: 100%;
		border: 1px /*solid*/ black;
		position: fixed;
		bottom: 0px;
		padding: 0 60px;
		height: 49px;
		
	}
	.jfsc li{
		float: left;
		font-size: 10px;
		width: calc(100% / 3);
		line-height: 14px;
		margin-top: 34px;
	}
	
</style>
